<html xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"    
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">    
<html>
<head th:include="common/common::header">
<meta charset="UTF-8">

<style type="text/css">
#index {
	padding: 15px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	opacity: 0;
	font-size: 12px;
}

.index-l {
	padding: 10px;
	width: 48%;
	overflow: auto;
}
</style>
</head>

<body>
	<div id="index">
		<form id="sysDepartment_form" class="easyui-form" method="post" data-options="novalidate:true">
		<div class="contentWrapper">
			<!--tab-->
			<div class="index-l">
				<div id="tt" class="easyui-tabs" data-options="tabHeight:31"
					style="width: 100%;">
					<div title="公司管理" style="padding: 20px; display: none;">
						<div class="contentWrapper">
						<input type="hidden" th:value="${sysGroup.orgid}" name="orgid">
						<input type="hidden" th:value="${sysGroup.id}" name="id">
							<div class="form-item">
								<label for="" class="label-top">公司名称：</label> <input
									id="" name="name" class="easyui-validatebox easyui-textbox"
									data-options="required:true" style="width: 90%;"
									th:value="${sysGroup.name}" >
							</div>
							<br>
							<div class="form-item">
							<label for="" class="label-top">公司领导：</label> <input id=""
									class="easyui-validatebox easyui-textbox" name="secretary"
									data-options="required:false" style="width: 90%;" th:value="${sysGroup.secretary}" >
							</div>
							<br>
							<div class="form-item">
								<label for="" class="label-top">公司地址：</label> <input id=""
									class="easyui-validatebox easyui-textbox" name="address"
									data-options="required:false" style="width: 90%;"
									th:value="${sysGroup.address}">
							</div>
							<br>
							<div class="form-item">
								<label for="" class="label-top" >公司类型：</label> <input id=""
									class="easyui-validatebox easyui-combobox" name="type" 
									data-options="valueField:'id',textField:'text',url:'/system/department/load_type'" style="width: 90%;" th:value="${sysGroup.type}">
							</div>
							<br>
							<div class="form-item">
								<label for="" class="label-top">联系电话：</label> <input id=""
									class="easyui-validatebox easyui-textbox" name="phone"  validType='phoneNum' 
									data-options="required:false" style="width: 90%;" th:value="${sysGroup.phone}">
							</div>
					</div>
				</div>
				
				<div title="部门管理"
						style="overflow: auto; padding: 20px; display: none;">
							<table id="department_grid" class="easyui-datagrid" title=""style="width: 100%; height: auto" th:attr="data-options='iconCls: \'icon-edit\',singleSelect: true,toolbar: \'#tb\',url:\'/system/department/load_edit_grid?orgid='+${orgid}+'\',method: \'post\',onClickRow: onClickRow'">
							<thead>
								<tr>
									<th id="rname"
										data-options="field:'name',width:550,editor:{type:'textbox',options:{required:true}}">部门名称</th>
									<th id="rtarget"
										data-options="field:'number',width:900,editor:{type:'textbox',options:{required:true}}">电话联系方式(可多填)</th>
									<th id="renabled"
										data-options="field:'enabled',width:170,formatter:function(value,row){return row.enabledname;},editor:{type:'combobox',options:{valueField:'id',textField:'text',method:'get',url:'/system/common/load_enabled.do',required:true}}">是否可用</th>
											</tr>
										</thead>
							</table>
							<div id="tb" style="height: auto">
									<a href="javascript:void(0)" class="easyui-linkbutton info" onclick="append()" id="btn">新增</a> 
									<a href="javascript:void(0)" class="easyui-linkbutton warning" data-options="plain:true" onclick="removeit()">删除</a>
							</div>
						</div>
			</div>
			<input type="hidden" id="sysDepartment_json" name="resourcesJson" th:value="${sysDepartment}">
					<div style="margin-top: 1%; padding-left: 42%">
						<a href="javascript:void(0)" onclick="submitForm()" class="easyui-linkbutton"data-options="iconCls:'fa fa-floppy-o'"style="height: 30px; border-left-width: 1px;">保存</a> 
					</div>
		</form>
	</div>
	
<script type="text/javascript">
/**
 * 验证
 */
$.extend($.fn.validatebox.defaults.rules, {     
    phoneNum: {    
        validator: function(value, param){  
         return /^1[3-8]+\d{9}$/.test(value);  
        },     
        message: '请输入正确的手机号码'    
    },  
}); 
function submitForm(){
	if (endEditing()){
 		$('#department_grid').datagrid('acceptChanges');
	}
 	var row = $('#department_grid').datagrid('getRows');
	$("#sysDepartment_json").val(JSON.stringify(row));
	$('#sysDepartment_form').form('submit',{
		url:'/system/department/save.do',
		onSubmit:function(){
			return $(this).form('enableValidation').form('validate');
		},
		 success: function (data) {
			 if (JSON.parse(data).status ==200) {
				 	break_save();
				} else {
						$.messager.alert('消息',JSON.parse(data).msg);
				}
		 }
	});
}


var editIndex = undefined;
function endEditing() {
	if (editIndex == undefined) {
			return true
		}
	if ($('#department_grid').datagrid('validateRow', editIndex)) {
		var ed = $('#department_grid').datagrid('getEditor', {index : editIndex,field : 'enabled'});
		var productname = $(ed.target).combobox('getText');
		$('#department_grid').datagrid('getRows')[editIndex]['enabledname'] = productname;
		$('#department_grid').datagrid('endEdit',editIndex);editIndex = undefined;
		return true;
	} else {
		return false;
	}
}
function onClickRow(index) {
		if (editIndex != index) {
				if (endEditing()) {
						$('#department_grid').datagrid('selectRow',index).datagrid('beginEdit',index);
						editIndex = index;
				} else {
						$('#department_grid').datagrid('selectRow',editIndex);
						}
				}
			}
function append() {
		if (endEditing()) {
				$('#department_grid').datagrid('appendRow', {enabled : 1});
				editIndex = $('#department_grid').datagrid('getRows').length - 1;
				$('#department_grid').datagrid('selectRow', editIndex).datagrid('beginEdit',editIndex);
			}
		}
function removeit() {
		if (editIndex == undefined) {
			return
			}
			$('#department_grid').datagrid('cancelEdit',editIndex).datagrid('deleteRow', editIndex);
			editIndex = undefined;
			}
function accept() {
			if (endEditing()) {
				$('#department_grid').datagrid('acceptChanges');
				}
		}
function reject() {
		$('#department_grid').datagrid('rejectChanges');
		editIndex = undefined;
		}
function getChanges() {
		var rows = $('#department_grid').datagrid('getChanges');
			alert(rows.length+ ' rows are changed!');
	}

</script>
</body>
</html>